import './index.less';
import 'devextreme/dist/css/dx.light.css';
import { Spin } from 'antd';
import { useState, useRef, useEffect } from 'react';

const WebFrame = (props: any) => {
  const { url } = props;
  const [loading, setLoading] = useState(true);
  const frameRef = useRef<any>();
  useEffect(() => {
    const domFrame = frameRef.current as any;
    if (domFrame) {
      domFrame.onload = () => {
        setLoading(false);
      };
    }
  });
  return (
    // test
    <div className={'framePanel'}>
      <Spin spinning={loading} delay={500}>
        <iframe
          ref={frameRef}
          src={url}
          style={{ width: '100%', height: '100%', border: 'none' }}
        />
      </Spin>
    </div>
  );
};

export default WebFrame;
